<template>
	<view class="title">
	    <view class="">{{title}}</view>
	    <slot name="left"></slot>
	    <slot></slot>
	</view>

</template>

<script>
	export default {
		props: {
			title: {
			    type: String,
			    default: ""
			}
		},
		data() {
			return {
				 name: ""
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.title {
	    -webkit-box-align: center;
	    align-items: center;
	    display: flex;
	    font-size: 32rpx;
	    font-weight: 700;
	    margin-bottom: 40rpx;
	    padding-left: 24rpx;
	    position: relative;
	}
	
	.title::after {
	    background: -webkit-linear-gradient(top,#9598ff,#7275fb);
	    border-radius: 2rpx;
	    bottom: 6rpx;
	    content: "";
	    display: block;
	    left: 0;
	    margin: auto;
	    position: absolute;
	    top: 6rpx;
	    width: 8rpx;
	}
</style>